<template>
  <div class="SaaS">
    <head-cont></head-cont>
    <div class="banner"></div>
    <div class="features">
      <header>
        <h2>
          <span class="block title">与羽戈科技合作，<span>你准备好了吗？</span></span>
          <span class="block main pos-rel">
            <span>Are you ready to collaborate with yuge?</span>
          </span>
        </h2>
      </header>
      <ul class="clearfix">
        <li class="fl">
          <img src="../../assets/image/icon5/6.png" alt="">
          <h6>姿态矫正</h6>
          <p>ATTITUDE CORRECTION</p>
          <div>
            <img src="../../assets/image/icon5/19.png" alt="">
          </div>
          <p>针对目标运动类型，</p>
          <p>定制化开发实现姿态校正功能的模型</p>
        </li>
        <li class="fl">
          <img src="../../assets/image/icon5/7.png" alt="">
          <h6>数据处理</h6>
          <p>DATA PROCESSING</p>
          <div>
            <img src="../../assets/image/icon5/19.png" alt="">
          </div>
          <p>开发公开的查询API接口，</p>
          <p>提供姿态识别数据处理服务</p>
        </li>
        <li class="fl">
          <img src="../../assets/image/icon5/8.png" alt="">
          <h6>定制化开发</h6>
          <p>ADVANTAGE  FEATURES</p>
          <div>
            <img src="../../assets/image/icon5/19.png" alt="">
          </div>
          <p>定制化开发培训教学系统，</p>
          <p>针对学员大数据提供个性化训练指导和个人成长记录分析</p>
        </li>
      </ul>
    </div>
    <div class="advantage">
      <header>
        <div class="text1">
          <span class="text">羽戈科技的</span>
          <span>ADVANTAGE</span>
        </div>
        <div class="text2">
          <span class="text">优势与特色</span>
          <span>FEATURES</span>
        </div>
      </header>
      <ul class="clearfix">
        <li class="fl bg1"></li>
        <li class="fl">
          <p>量化学习成绩</p>
          <p>将之前不好操控的学习成绩通过清晰的</p>
          <p>图表显示出来，便于学员通过这已反馈</p>
          <p>进行加强练习</p>
        </li>
        <li class="fl bg2"></li>
        <li class="fl">
          <p>个性化指导</p>
          <p>定制化培训教学系统可以为</p>
          <p>学员提供个性化的指导，</p>
          <p>总结成长过程中每一次进步</p>
        </li>
        <li class="fl">
          <p>闭环学习模式</p>
          <p>相比较于一般的学习运动软件</p>
          <p>羽戈科技基于姿态矫正的核心算法</p>
          <p>实现运动学习的闭环</p>
        </li>
        <li class="fl bg3"></li>
        <li class="fl">
          <p>高可移植性</p>
          <p>针对不同的运动类型可很快</p>
          <p>定制化开发相关的姿态识别模型</p>
          <p>并在后期数据积累下不断优化</p>
        </li>
        <li class="fl bg4"></li>
      </ul>
    </div>
    <div class="customized">
      <h2>
        <span class="title">合作流程内容<span>定制化</span></span>
        <span class="main pos-rel">
          <span>Cooperation process content customization.</span>
        </span>
      </h2>
      <section>
        <div class="customized-item fl">
          <h3>
            <span>定制化的</span>
            <span>模型开发</span>
          </h3>
          <p>针对目标体育运动，</p>
          <p>作定制化的模型开发，</p>
          <p>将核心的姿态识别算法迁移到</p>
          <p>目标运动中实现姿态矫正功能</p>
        </div>
        <div class="customized-item color1 fl">
          <h3>
            <span>姿态调整</span>
            <span>服务定制化</span>
          </h3>
          <p>定制化开发API接口，</p>
          <p>为客户提供学员动作姿态识别、</p>
          <p>矫正的数据处理服务</p>
        </div>
        <div class="customized-item color2 fl">
          <h3>
            <span>培训系统</span>
            <span>定制化</span>
          </h3>
          <p>定制化开发培训系统，</p>
          <p>可视化呈现用户姿态矫正的过程，</p>
          <p>基于学员大数据提供个性化的训练指导，</p>
          <p>记录下学员全部进步轨迹，</p>
          <p>生成个人成长档案</p>
        </div>
      </section>
    </div>
    <foot-cont></foot-cont>
  </div>
</template>
<script>
import headCont from '@/components/header'
import footCont from '@/components/footer/foot2'
export default {
  components:{
    headCont,
    footCont
  }
}
</script>
<style scoped>
  .banner{
    min-width: 1200px;
    height:550px;
    background: url('../../assets/image/icon5/1.jpg') no-repeat center center;
  }
  .features{
    height:560px;
    width:1200px;
    margin:0 auto;
  }
  .features header{
    height:130px;
    padding-top:52px;
    box-sizing: border-box;
  }
  .features h2 .block{
    display: block;
    text-align: center;
  }
  .features h2 .title{
    font-size: 26px;
    line-height: 60px;
    color:#595959;
  }
  .features h2 .title span{
    color:#406bff;
  }
  .features h2 .main{
    font-size: 14px;
    color:#999;
  }
  .features .main::after,.features .main::before{
    content: '';
    position: absolute;
    top:9px;
    width:440px;
    height:2px;
    background-color: #c4c4c4;
  }
  .features .main::before{
    left:0;
  }
  .features .main::after{
    right:0;
  }
  .features li{
    width:400px;
    height:430px;
    padding:40px 80px;
    box-sizing: border-box;
    text-align: center;
  }
  .features li h6{
    margin-top:15px;
    color:#2f87ff;
    font-size: 24px;
  }
  .features li p{
    font-size: 14px;
    line-height: 26px;
    color:#73aeff;
  }
  .features li div{
    width:40px;
    margin:0 auto;
    padding-top:7px;
    border-top:2px solid #87baff;
  }
  .advantage{
    height:604px;
    min-width:1200px;
    background: url('../../assets/image/icon5/15.png') no-repeat center center;
  }
  .advantage header{
    width:442px;
    margin:0 auto;
  }
  .advantage .text1{
    color:#898989;
    font-size: 26px;
    line-height: 40px;
  }
  .advantage .text1 .text{
    color:#9bc3fe;
    font-size:20px;
  }
  .advantage .text2{
    line-height: 40px;
    color:#c3c0c0;
    font-size:18px;
  }
  .advantage .text2 .text{
    color:#509eff;
    font-size: 34px;
  }
  .advantage ul{
    width:1200px;
    margin:0 auto;
  }
  .advantage li{
    width:300px;
    height:210px;
    padding:60px 30px 50px 30px;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 24px;
    color:#666666;
    text-align: center;
  }
  .advantage .bg1{
    background: url('../../assets/image/icon5/9.png') no-repeat;
  }
  .advantage .bg2{
    background: url('../../assets/image/icon5/10.png') no-repeat;
  }
  .advantage .bg3{
    background: url('../../assets/image/icon5/11.png') no-repeat;
  }
  .advantage .bg4{
    background: url('../../assets/image/icon5/12.png') no-repeat;
  }
  .customized{
    height:500px;
    width:1200px;
    padding:50px 0;
    box-sizing: border-box;
    margin:0 auto;
  }
  .customized h2{
    text-align: center;
  }
  .customized h2 .title,.customized h2 .main{
    display: block;
  }
  .customized .title{
    font-size: 24px;
    line-height: 60px;
    color:#7a7a7a;
  }
  .customized .title span{
    color:#406bff;
  }
  .customized .main{
    font-size: 14px;
    color:#999;
  }
  .customized .main::after,.customized .main::before{
    content: '';
    position: absolute;
    top:9px;
    width:440px;
    height:2px;
    background-color: #c4c4c4;
  }
  .customized .main::before{
    left:0;
  }
  .customized .main::after{
    right:0;
  }
  .customized section{
    margin-top:40px;
  }
  .customized-item{
    width:280px;
    height:280px;
    border:8px solid #0080d0;
    box-sizing: border-box;
    border-radius: 50%;
    text-align: center;
    padding: 40px 34px;
  }
  .customized-item h3 span{
    display: block;
    color:#0080d0;
    line-height: 36px;
  }
  .customized-item p{
    font-size: 14px;
    color:#999;
    line-height: 24px;
  }
  .color1{
    margin:0 180px;
    position: relative;
    border:8px solid #00d5df;
  }
  .color1::after,.color1::before{
    content: url('../../assets/image/icon5/20.png');
    position: absolute;
    top:110px;
  }
  .color1::before{
    left:-130px;
  }
  .color1::after{
    right:-130px;
  }
  .color1 h3 span{
    color:#00d5df
  }
  .color2{
    padding: 40px 16px;
    border: 8px solid #8ad06e;
  }
  .color2 p{
    font-size: 12px;
  }
  .color2 h3 span{
    color:#8ad06e;
  }
</style>
